<template>
  <div>
    <at-table 
    :data="tableData"
    :show-header="true"
    :border="false"
    @filter-change="filterChange"
    @selection-change="selectionChange"
    @cell-click = 'alert'
    @select = 'select'>
    <at-table-column 
      type="selection"
      width="30"
    >
    </at-table-column>
    <at-table-column 
      prop="date" 
      label="名称1" 
      ref="a"
      filter-placement="bottom-end"
      sortable
      :img='imgsrc'
      :imgTitle="'测试图片提示文字'"
      >
    </at-table-column>
    <at-table-column 
      prop="name" 
      label="名称2" 
      ref="a"
      :filters="[
          { text: 'aaa', value: 'aaa'}, 
          { text: '已完成', value: '已完成' }
        ]" 
      filter-placement="bottom-end"
      :filter-method="filterMethods1"
      width="150"
     
      column-key="name"
      align="right"
      :sort-methods="sortMethods"
      show-overflow-tooltip
      min-width="300"
      >
    </at-table-column>
    <at-table-column 
      prop="address" 
      label="名称3" 
      ref="a" 
      :filters="[
          { text: 'aaa', value: 'aaa'}, 
          { text: '已完成', value: '已完成' }
        ]"
      filter-placement="bottom-end"
      >
    </at-table-column>
     <at-table-column 
      prop="tag.aaa" 
      label="名称4" 
      ref="a"
      filter-placement="bottom-end"
      sortable
      >
    </at-table-column>
    </at-table>
    <right-expand
      :modal="false"
      :visible.sync="expandVisible"
      size="tiny"
      :before-close="handleClose"
      >
      <span slot="headline">
       1111
        一级标题，基础字体大小颜色已给出，如有其它需要，请自行调整
      </span>
      <span slot="subhead">
         二级标题，基础字体大小颜色已给出，如有其它需要，请自行调整
      </span>
      <span>
         表格内容
         内容表格内容表格内容表格内容表格内容表格内容
         内容表格内容表格内容表格内容表格内容表格内容
         <div class="red"></div>
      </span>
    </right-expand>
  </div>
</template>

<script>
export default {
  data(){
    return { 
      imgsrc:require('../../src/theme-default/images/formImg/01.png') ,
      index:null,
      expandVisible: false,
      tableData:[{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: {aaa:5555},
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 151999 弄',
          tag: {aaa:5555},         
        }, 
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: {aaa:5555},
        }, 
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: {aaa:5555},
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: {aaa:5555},
        },
        {
          date: '2016-05-03',
          name: 'aaa',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: {aaa:5555},
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: {aaa:5555},
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: {aaa:5555},
        }
      ],
    }
  },
  methods: {
    filterMethods1(value,row){
      return row.name == value
    },
    filterMethods2(value,row){
      return row.tag == value  
    },
    alert(){
      // alert('cellclick')
    },
    rowClick(row,event,column){
      console.info(1111)
        if(row.id==this.index && this.expandVisible){
          this.expandVisible = false
        }else {
          this.expandVisible = true;
        }
      this.index=row.id;
    },
    selectable(row,index){
      if(row.tag == 555){
        return false
      }
        return true
    },
    select(){
      console.log('select')
    },
    sortChange({column, prop, order}){
      console.log('sortChange')
    },
    sortMethods(){
      console.log("sortMethods")
    },
    selectAll(selection){
      console.log("selection")
    },
    select(selection, row){
      console.log('select')
    },
    filterChange(filters){
      console.log("filterChange")
    },
    sortChange({ column, prop, order }){
      console.log("sortChange")
    },
    selectionChange(){
      console.log("selectionChange")
    },
    handleSizeChange(){
      console.log("size-change")
    },
    handleCurrentChange(){
      console.log("handleCurrentChange")
    },
    handleClose(done) {
        done();
    }
  },
}
</script>

<style>
</style>
